<template>
  <div class="app-container v-flex">
    <filter-form :form="listQuery" :data="filterData" @deleta="deleteDatas" @search="search" @addForm="addForm" @resizeTable="resizeTable" />
    <div ref="main" class="v-flex-elastic">
      <el-table
        v-if="height>0"
        ref="multipleTable"
        v-loading="listLoading"
        :data="tableData"
        default-expand-all="true"
        row-key="id"
        :height="height"
        style="width: 100%"
        @selection-change="handleTagChange">
        <el-table-column
          align="center"
          type="selection"
          width="50" />
        <el-table-column
          label="序号"
          align="center"
          type="index"
          width="50" />
        <el-table-column
          v-if="tableColumnCheckLists[0].ispass"
          prop="moduleName"
          align="left"
          width="300"
          show-overflow-tooltip
          label="模块名称" />
        <el-table-column
          prop="actionList"
          align="center"
          show-overflow-tooltip
          label="功能名称（编辑）">
          <template slot-scope="scope">
            <span v-for="(item,index) in scope.row.actionList" :key="index" style="margin: 0 5px;">{{ item.actionName }}<a class="bianj" @click="updateForm(scope,index)">[编辑]</a><a class="shanc" @click="deleteData(scope,index)">[删除]</a></span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-box">
      <pagination
        :total="total"
        :page.sync="listQuery.page"
        :size.sync="listQuery.size"
        @pagination="getList" />
    </div>
    <base-dialog
      class="dictionary-type-dialog"
      :visible.sync="dialog.visible"
      :title="dialog.title"
      :loading="dialog.loading"
      :disabled="dialog.disabled"
      @open="beforeOpenDialog"
      @updateData="updateData">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        :disabled="dialog.disabled"
        label-width="120px">
        <el-row :gutter="20">
          <!-- <el-col :span="12">
            <el-form-item label="功能编码" prop="id">
              <el-input v-model="temp.id" />
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="功能名称" prop="actionName">
              <el-input v-model="temp.actionName" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item
              label="所属平台"
              prop="dtName">
              <el-select
                v-model="temp.dtName"
                multiple>
                <el-option
                  v-for="item in optionsDept"
                  :key="item.id"
                  :label="item.deptTypeName"
                  :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="所属模块"
              prop="dtCode">
              <el-select
                v-model="temp.dtName"
                multiple>
                <el-option
                  v-for="item in optionsDept"
                  :key="item.id"
                  :label="item.deptTypeName"
                  :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>-->
          <el-col :span="12">
            <el-form-item
              label="所属平台"
              prop="platformId">
              <el-select
                v-model="temp.platformId"
                @change="changeSite">
                <el-option
                  v-for="item in optionsDept"
                  :key="item.id"
                  :label="item.platformName"
                  :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属模块" prop="moduleId">
              <select-tree
                ref="tree_box1"
                v-model="temp.moduleId"
                :options="deptTreeData"
                :props="defaultProps" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="排序号"
              prop="orderNo">
              <el-input
                v-if="dialogStatus == 'optionsDept'"
                v-model="temp.orderNo"
                disabled />
              <el-input v-else v-model="temp.orderNo" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否启用" prop="status">
              <el-radio-group v-model="temp.status">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              label="描述"
              prop="description">
              <el-input v-model="temp.description" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </base-dialog>
  </div>
</template>

<script>
import { platform, treeList } from '@/api/dsc/sysm'
import { getList, saveOrUpdate, deleteById } from '@/api/dsc/sysm/plarform/form'
import { tableMixin } from '@/utils/public'
export default {
  name: 'DscType',
  mixins: [tableMixin],
  data() {
    return {
      multipleSelection: [], // 选择行的复选框
      height: 0, // table高度
      tableData: [], // 表格数据
      listQuery: {// 搜索条件
        keyName: '',
        page: 1,
        size: 20
      },
      optionsDept: [],
      modalpd: false, // 上级模块
      deptTreeData: [],
      defaultProps: {
        parent: 'pId', // 父级唯一标识
        value: 'id', // 唯一标识
        label: 'label', // 标签显示
        children: 'children' // 子级
      },
      filterData: {
        moduleName: {
          key: 'moduleName',
          type: 'input',
          title: '模块名称',
          placeholder: '请输入模块名称'
        },
        // keyContent: {
        //   key: 'keyContent',
        //   type: 'input',
        //   title: '所属平台',
        //   placeholder: '请输入字典内容'
        // },
        // Hierarchy: {
        //   key: 'Hierarchy',
        //   type: 'select',
        //   title: '所属模块',
        //   placeholder: '所有',
        //   options: [],
        //   props: {
        //     label: 'platformName',
        //     value: 'id'
        //   }
        // },
        // subset: {
        //   key: 'subset',
        //   type: 'select',
        //   title: '包含子级',
        //   placeholder: '所有',
        //   options: [],
        //   props: {
        //     label: 'platformName',
        //     value: 'id'
        //   }
        // },
        status: {
          key: 'status',
          type: 'status',
          title: '是否启用',
          options: [
            {
              label: 1,
              value: '是'
            },
            {
              label: 0,
              value: '否'
            }
          ]
        }
      },
      pinz: {},
      platformOptions: [], // 所属平台option
      total: 0,
      textMap: {
        update: '编辑',
        view: '查看',
        create: '添加'
      },
      dialogFormVisible: false, // 弹窗开关
      dialogStatus: '', // 弹窗类型（添加、查看、编辑）
      dialog: {
        visible: false,
        title: '',
        loading: false,
        disabled: false
      },
      temp: {},
      tempForm: {// 弹窗表单
        id: null,
        dtName: '',
        dtCode: '',
        dtDec: '',
        isPub: true,
        isSystem: true,
        status: true
      },
      rowIndex: null,
      rules: {},
      rulesModel: {
        dtName: [{ required: true, message: '必填', trigger: 'blur' },
          { min: 1, message: '大于1个字符', trigger: 'blur' },
          { max: 20, message: '小于20个字符', trigger: 'blur' }],
        dtCode: [{ required: true, message: '必填', trigger: 'blur' },
          { min: 1, message: '大于1个字符', trigger: 'blur' },
          { max: 20, message: '小于20个字符', trigger: 'blur' }],
        dtDec: [{ max: 255, message: '小于255个字符', trigger: 'blur' }]
      },
      listLoading: false,
      disabled: false, // 是否禁止表单操作
      tableColumnCheck: ['模块名称'],
      checkList: ['模块名称'],
      tableColumnCheckLists: [
        { label: '模块名称', prop: 'moduleName', ispass: true }
      ]
    }
  },

  watch: {
    tableColumnCheck(newVal) {
      if (newVal) {
        var arr = this.checkList.filter(i => newVal.indexOf(i) < 0) // 未选中
        this.tableColumnCheckLists.map(i => {
          if (arr.indexOf(i.label) !== -1) {
            i.ispass = false
          } else {
            i.ispass = true
          }
        })
      }
    }
  },
  created() {
    this.temp = Object.assign({}, this.tempForm)
    this.getList()
    platform().then(response => {
      this.optionsDept = response.data
    }).catch(() => {
    })
  },
  methods: {
    changeSite(data) {
      treeList({ platformId: data }).then(response => {
        this.deptTreeData = response.data.children
      }).catch(() => {
      })
    },
    // 查询列表
    getList() {
      this.listLoading = true
      getList(this.listQuery).then(response => {
        this.tableData = response.data
        // this.total = response.data.total
        for (const i of this.tableData) {
          i.isSystem = !!i.isSystem
          i.isPub = !!i.isPub
          i.status = !!i.status
        }
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 0 * 1000)
      }).catch(() => {
        this.listLoading = false
      })
    },
    // 搜索
    search() {
      this.listQuery.page = 1
      this.getList()
    },
    // 添加
    addForm() {
      // this.disabled = false
      this.temp = Object.assign({}, this.tempForm)
      // this.dialogStatus = 'create'
      // this.dialogFormVisible = true
      this.rules = Object.assign({}, this.rulesModel)
      this.dialog = Object.assign({}, this.dialog, {
        visible: true,
        title: '添加',
        loading: false,
        disabled: false
      })
    },
    // 添加数据
    // addData() {
    //   this.validate().then(() => {
    //     this.saveOrUpdate(this.temp, 1)
    //   })
    // },
    // 查看
    view(row) {
      // this.disabled = true
      this.temp = Object.assign({}, row) // copy obj
      // this.dialogStatus = 'view'
      this.rules = {}
      // this.dialogFormVisible = true
      this.dialog = Object.assign({}, this.dialog, {
        visible: true,
        title: '查看',
        loading: false,
        disabled: true
      })
      this.changeSite(row.id)
    },
    // 编辑
    updateForm(row, $index) {
      // this.disabled = fals
      this.rowIndex = $index
      row = row.row
      this.changeSite(row.platformId)
      this.pinz = {
        actionName: row.actionList[$index].actionName,
        platformId: row.platformId,
        moduleId: row.id,
        id: row.actionList[$index].actionId,
        orderNo: row.actionList[$index].orderNo,
        status: row.actionList[$index].status,
        description: row.actionList[$index].description
      }
      this.temp = Object.assign({}, this.pinz) // copy obj
      // this.dialogStatus = 'update'
      this.rules = Object.assign({}, this.rulesModel)
      // this.dialogFormVisible = true
      this.dialog = Object.assign({}, this.dialog, {
        visible: true,
        title: '编辑',
        loading: false,
        disabled: false
      })
    },
    // 编辑数据
    updateData() {
      this.validate().then(() => {
        this.saveOrUpdate(this.temp)
      })
    },
    // type 1 添加，2 编辑
    saveOrUpdate(params, type) {
      const param = Object.assign({}, params)
      saveOrUpdate(param).then(response => {
        if (this.dialog.title === '添加') {
          this.tableData.unshift(response.data)
          this.total++
        } else {
          Object.assign(this.tableData[this.rowIndex], response.data)
        }
        this.getList()
        this.notifiySuccess('保存成功!')
        this.dialog.visible = false
      })
    },
    beforeOpenDialog() {
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    // 启用、停用,是否系统
    enable(row, $index) {
      this.rowIndex = $index
      this.saveOrUpdate(row, 2)
    },
    // 删除
    deleteData(row, $index) {
      this.confirmBox('确定删除?').then(() => {
        deleteById(row.row.actionList[$index].actionId).then(response => {
          this.notifiySuccess('删除成功!')
          // this.tableData.splice($index, 1)
          // this.total--
          this.getList()
        })
      }).catch(() => {

      })
    },
    // 批量删除
    handleTagChange(val) {
      this.multipleSelection = val
    },
    deleteDatas() {
      const ids = []
      for (const i of this.multipleSelection) {
        // ids += ',' + i.id
        ids.push(i.id)
      }
      // ids = ids.substring(1)

      if (!ids) {
        Message({
          message: '请至少选择一条数据',
          type: 'error',
          duration: 3 * 1000
        })
        return
      }
      let c = 0
      this.confirmBox('确定删除?').then(() => {
        ids.forEach(item => {
          deleteById(item).then(response => {
            c++
            if (ids.length === c) {
              this.notifiySuccess('删除成功!')
              this.getList()
            }
          })
        })
      }).catch(() => {

      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .bianj{
    color: #13ce66;
    margin: 0 5px;
  }
  .shanc{
    color: #e64242;
    margin: 0 5px;
  }
  </style>
